import React, { useEffect, useCallback, useState, useMemo } from 'react';
import Event from '@y.dsh/event';
import usePassiveSupported from '@y.dsh/hooks/lib/usePassiveSupported';
import { slideTo } from '@y.dsh/utils/lib/slideTo';
import { findParentNode } from '@y.dsh/utils/lib/dom';
import Top from '../Icon/Top';
import longPressButton from './sideEvent';
import { SideButtonProps } from './';

// 回到顶部按钮
function SideTheTopButton(props: SideButtonProps): JSX.Element {

  const buttonProps = { // 处理参数
    ...props,
    onTap: undefined,
    childrenNotAllowDown: undefined,
    inlayType: undefined,
    index: undefined
  };
  delete buttonProps.onTap;
  delete buttonProps.childrenNotAllowDown;
  delete buttonProps.inlayType;
  delete buttonProps.index;

  const passiveSupported = usePassiveSupported(); // 检测是否支持{ passive: false }
  const eventOptions = useMemo(() => passiveSupported ? { passive: false } : false, [passiveSupported]);


  const toTheTop = useCallback(() => { // 回到顶部
    const viewRef = document.querySelector('.easy-scroll-view');
    if (viewRef) {
      slideTo({
        startPos: viewRef.scrollTop,
        endPos: 0,
        chunkCallback(nextScrollTop) {
          // 不断靠近
          viewRef.scrollTop = nextScrollTop;
        },
        completeCallback(endPos) {
          // 到达
          viewRef.scrollTop = endPos;
        }
      });
    }
  }, []);


  // 监听滚动事件 做显示隐藏
  const [visible, setVisible] = useState(false); // 显示隐藏
  const handleScroll = useCallback(() => {
    const viewRef = document.querySelector('.easy-scroll-view');
    if (viewRef && viewRef.scrollTop > 100) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }, []);
  const scrollDestroy = useCallback(() => {
    const viewRef = document.querySelector('.easy-scroll-view');
    if (viewRef) {
      viewRef.removeEventListener('scroll', handleScroll);
    }
  }, [handleScroll]);
  useEffect(() => {
    const viewRef = document.querySelector('.easy-scroll-view');
    if (viewRef) {
      handleScroll();
      viewRef.addEventListener('scroll', handleScroll);
    }
    return scrollDestroy
  }, [handleScroll, scrollDestroy]);

  return (
    visible ? (
      <Event
        longPressPreventDefault
        onLongPress={(event) => {
          longPressButton(event, props.childrenNotAllowDown, eventOptions);
        }}
        onTap={(event) => {
          const button = findParentNode(event.target as HTMLElement, 'easy-scroll-side-button-drag'); // 判断当前元素是不是抖动状态
          if (!button) {
            // 非抖动状态才可以触发onTap 
            let flag;
            if (props.onTap) {
              flag = props.onTap();
            }
            if (flag === undefined || flag) {
              // 如果返回 false 则不调用回到顶部
              toTheTop();
            }
          }
        }}
      >
        <button
          className="easy-scroll-side-button"
          {...buttonProps}
        >
          <Top
            animation
          />
        </button>
      </Event>
    ) : <></>
  )
}

export default SideTheTopButton
